<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button>打开</button>
<script>
  var num = 0;

  var btn = document.querySelector("button");

  btn.onclick = async function file() {
    btn.hidden=true;
    // 显示文件选择器
    const directoryHandle = await window.showDirectoryPicker();
    // 处理目录
    await proecssHandle(directoryHandle);
    // 获取目录下的第三个子项（即文件）
    files = await directoryHandle.children;
    // 获取文件
    const file = await files[0].getFile();

    // 创建文件读取器
    const fileReader = new FileReader();
    // 当文件读取完成时执行回调函数
    fileReader.onload = function (e) {
      console.log(e.target.result);
      let img = document.createElement("img");
      img.setAttribute("src", e.target.result);
      img.addEventListener("click", async function () {

        num<files.length-1?num++:num=0;
        const nfile = await files[num].getFile();
        getFile(nfile,img)
      });

      document.body.append(img);


    }
    // 读取文件内容
    fileReader.readAsDataURL(file);


  }

  async function getFile(file,img) {


    // 创建文件读取器
    const fileReader = new FileReader();
    fileReader.onload = await function (e) {
      img.setAttribute("src", e.target.result);
    }
    // 读取文件内容
    fileReader.readAsDataURL(file);
  }

  async function proecssHandle(handle) {

    // 如果是文件则直接返回
    if (handle.kind === 'file') {
      return;
    }
    // 初始化子文件夹数组
    handle.children = [];
    // 获取文件夹中的所有文件和子文件夹
    let iter = await handle.entries();
    // 遍历文件夹中的所有文件和子文件夹
    for await (let entry of iter) {
      // 递归调用处理函数
      await proecssHandle(entry[1]);
      // 将子文件夹添加到父文件夹的子文件夹数组中
      handle.children.push(entry[1]);
    }
  }

</script>
</body>
</html>
